﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Sample Keyboard Pad</title>
    <link rel="stylesheet" href="styles.css" type="text/css" />
    <link rel="stylesheet" href="jq-keypad.css" type="text/css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script src="../../jquery-keypad.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var x = $('#KeyboardPad').jqKeyPad({
                pasteAllowed: false,
                onButtonCommand: function (e) {
                    if (e.command == 'Enter') {
                        alert('user is requesting Enter');
                    }
                    else if (e.command == 'Caps') {
                        alert('user is request caps lock')
                    }
                    else if (e.command == 'Shift') {
                        alert('user is requesting key shift');
                    }
                    //alert('onButtonCommand: ' + e.command + ' : ' + e.argument + ' : ' + e.value);
                    //return false to prevent the value from entering the keypad display
                    return false;
                }
            });
        }); 


</script>
</head>
<body>
    <div id="PageContainer">
        <h1>Keyboard Demonstration</h1>
        <div id="KeyboardPad" mode="alphanumeric" initialKeyPad="keyPad">
            <div class="KeyPadValue"></div>
            <input type="text" id="txtEnteredValue" />
            <ul KeyPadName="keyPad">
                <!--first row-->
                <li val="~"><div>~</div></li>
                <li val="1"><div>1</div></li>
                <li val="2"><div>2</div></li>
                <li val="3"><div>3</div></li>
                <li val="4"><div>4</div></li>
                <li val="5"><div>5</div></li>
                <li val="6"><div>6</div></li>
                <li val="7"><div>7</div></li>
                <li val="8"><div>8</div></li>
                <li val="9"><div>9</div></li>
                <li val="0"><div>0</div></li>
                <li val="-"><div>-</div></li>
                <li val="="><div>=</div></li>
                <li class="back"><div>&larr;</div></li>

                <!--second row-->
                <li val="&#09;"><div>Tab</div></li>
                <li val="q"><div>q</div></li>
                <li val="w"><div>w</div></li>
                <li val="e"><div>e</div></li>
                <li val="r"><div>r</div></li>
                <li val="t"><div>t</div></li>
                <li val="y"><div>y</div></li>
                <li val="u"><div>u</div></li>
                <li val="i"><div>i</div></li>
                <li val="o"><div>o</div></li>
                <li val="p"><div>p</div></li>
                <li val="["><div>[</div></li>
                <li val="]"><div>]</div></li>
                <li val="\"><div>\</div></li>

                
                <!--third row-->
                <li class="fiftyPercentLarger" commandName="Caps" commandArgument=""><div>Caps</div></li>
                <li val="a"><div>a</div></li>
                <li val="s"><div>s</div></li>
                <li val="d"><div>d</div></li>
                <li val="f"><div>f</div></li>
                <li val="g"><div>g</div></li>
                <li val="h"><div>h</div></li>
                <li val="j"><div>j</div></li>
                <li val="k"><div>k</div></li>
                <li val="l"><div>l</div></li>
                <li val=";"><div>;</div></li>
                <li val="'"><div>'</div></li>
                <li class="fiftyPercentLarger" commandName="Enter" commandArgument=""><div>Enter</div></li>

                
                <!--fourth row-->
                <li class="double" commandName="Shift" commandArgument=""><div>Shift</div></li>
                <li val="z"><div>z</div></li>
                <li val="x"><div>x</div></li>
                <li val="c"><div>c</div></li>
                <li val="v"><div>v</div></li>
                <li val="b"><div>b</div></li>
                <li val="n"><div>n</div></li>
                <li val="m"><div>m</div></li>
                <li val=","><div>,</div></li>
                <li val="."><div>.</div></li>
                <li val="/"><div>/</div></li>
                <li class="double reset"><div>Clear</div></li>


                
                <!--fifth row-->
                <li val="@"><div>@</div></li>
                <li class="fiftyPercentLarger" val=".com"><div>.com</div></li>
                <li class="triple" val="@gmail.com"><div>@gmail.com</div></li>
                <li class="quadruple" val=" "><div>&nbsp;</div></li>
                <li class="triple" val="@hotmail.com"><div>@hotmail.com</div></li>
                <li class="fiftyPercentLarger" val=".net"><div>.net</div></li>





                <!--<li class="double floatRight back"><div>&larr;</div></li>
                <li class="double floatRight reset"><div>Clear</div></li>
                <li class="large floatRight" val="testval" commandName="testname" commandArgument="testargs"><div>Cmd</div></li>-->
            </ul>

            <ul style="display:none;">
                <li specialVal="space"></li>
                <li specialVal="backspace"></li>               
                <li specialVal="tab"></li>
                <li specialVal="delete"></li>              
                <li specialVal="leftarrow"></li>
                <li specialVal="uparrow"></li>
                <li specialVal="rightarrow"></li>
                <li specialVal="downarrow"></li> 
            </ul>

            <br class="clearBoth" />
        </div>

        <br class="clearBoth" />
    </div>
</body>
</html>
